<template>
  <s-layout title="退货物流">
    <view>
      <form report-submit="true" @submit="subRefund">
        <view class="apply-return">
          <view class="list borRadius14">
            <view class="item acea-row row-between-wrapper" style="display: flex; align-items: center">
              <view>物流公司</view>
              <picker
                mode="selector"
                class="num"
                :value="state.expressIndex"
                :range="state.expresses"
                range-key="name"
                @change="bindPickerChange"
              >
                <view class="picker acea-row row-between-wrapper">
                  <view class="reason">{{ state.expresses[state.expressIndex].name }}</view>
                  <!-- TODO 芋艿：这里样式有问题，少了 > 按钮 -->
                  <text class="iconfont icon-jiantou" />
                </view>
              </picker>
            </view>
            <view class="item textarea acea-row row-between" style="display: flex; align-items: center">
              <view>物流单号</view>
              <input placeholder="请填写物流单号" class="num" name="logisticsNo" placeholder-class="placeholder" />
            </view>
            <button
              class="returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn"
              form-type="submit"
              style="background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important"
            >
              提交
            </button>
          </view>
        </view>
      </form>
    </view>
  </s-layout>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import sheep from '@/sheep'
import AfterSaleApi from '@/api/trade/afterSale'
import DeliveryApi from '@/api/trade/delivery'

const state = reactive({
  id: 0, // 售后编号
  expressIndex: 0, // 选中的 expresses 下标
  expresses: [], // 可选的快递列表
})

function bindPickerChange(e) {
  state.expressIndex = e.detail.value
}

async function subRefund(e) {
  let data = {
    id: state.id,
    logisticsId: state.expresses[state.expressIndex].id,
    logisticsNo: e.detail.value.logisticsNo,
  }
  const { code } = await AfterSaleApi.deliveryAfterSale(data)
  if (code !== 0) {
    return
  }
  uni.showToast({
    title: '填写退货成功',
  })
  sheep.$router.go('/pages/order/aftersale/detail', { id: state.id })
}

// 获得快递物流列表
async function getExpressList() {
  const { code, data } = await DeliveryApi.getDeliveryExpressList()
  if (code !== 0) {
    return
  }
  state.expresses = data
}

onLoad((options) => {
  if (!options.id) {
    sheep.$helper.toast(`缺少订单信息，请检查`)
    return
  }
  state.id = options.id
  // 获得快递物流列表
  getExpressList()
})
</script>
<style lang="scss" scoped>
.apply-return {
  padding: 20rpx 30rpx 70rpx 30rpx;
}

.apply-return .list {
  background-color: #fff;
  margin-top: 18rpx;
  padding: 0 24rpx 70rpx 24rpx;
}

.apply-return .list .item {
  min-height: 90rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 30rpx;
  color: #333;
}

.apply-return .list .item .num {
  color: #282828;
  margin-left: 27rpx;
  // width: 227rpx;
  // text-align: right;
}

.apply-return .list .item .num .picker .reason {
  width: 385rpx;
}

.apply-return .list .item .num .picker .iconfont {
  color: #666;
  font-size: 30rpx;
  margin-top: 2rpx;
}

.apply-return .list .item.textarea {
  padding: 24rpx 0;
}

.apply-return .list .item textarea {
  height: 100rpx;
  font-size: 30rpx;
}

.apply-return .list .item .placeholder {
  color: #bbb;
}

.apply-return .list .item .title {
  height: 95rpx;
  width: 100%;
}

.apply-return .list .item .title .tip {
  font-size: 30rpx;
  color: #bbb;
}

.apply-return .list .item .upload {
  padding-bottom: 36rpx;
}

.apply-return .list .item .upload .pictrue {
  border-radius: 14rpx;
  margin: 22rpx 23rpx 0 0;
  width: 156rpx;
  height: 156rpx;
  position: relative;
  font-size: 24rpx;
  color: #bbb;
}

.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
  margin-right: 0;
}

.apply-return .list .item .upload .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 14rpx;
}

.apply-return .list .item .upload .pictrue .icon-guanbi1 {
  position: absolute;
  font-size: 45rpx;
  top: -10rpx;
  right: -10rpx;
}

.apply-return .list .item .upload .pictrue .icon-icon25201 {
  color: #bfbfbf;
  font-size: 50rpx;
}

.apply-return .list .item .upload .pictrue:nth-last-child(1) {
  border: 1rpx solid #ddd;
  box-sizing: border-box;
}

.apply-return .returnBnt {
  font-size: 32rpx;
  color: #fff;
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 43rpx auto;
}
</style>
